<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>慢慢买</title>
    <!-- 引入资源 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./libs/flexible.js"></script>
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script src="./libs/template-web.js"></script>
    <link rel="stylesheet" href="./libs/swiper/swiper-bundle.min.css">
    <script type="text/html" id="banImgTemplate">
        {{each message item index}}
            <div class="swiper-slide" id="imgId{{index}}">
                <img src="{{item.image_src}}" alt="">
            </div>
        {{/each}}
    </script>
    <script type="text/html" id="navTemplate">
        {{each message item index}}
        <li><img src="{{item.image_src}}" alt=""></li>
        {{/each}}
    </script>
    <script type="text/html" id="floorTemplate">
        {{each message item index}}
        <h2 class="floor_td">
            <img src="{{item.floor_title.image_src}}" alt="">
        </h2>
        
        <ul class="floor_bd">
            {{each item.product_list items indexs }}
            <li>
                <img src="{{items.image_src}}" alt="">
            </li>
            {{/each}}
        </ul>
        
        {{/each}}
    </script>
</head>

<body>
    <!-- 头部模块 -->
    <header>
        <div class="shortCut">
            <p>16:36</p>
            <h1>黑马优购</h1>
        </div>
        <div class="search">
            <div class="txt">搜索</div>
        </div>
    </header>


    <!-- swiper轮播图模块 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">

        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- navigator导航栏模块 -->
    <ul class="nav">

    </ul>

    <!-- floor楼层模块 -->
    <div class="floor clearfix">

    </div>

    <!-- foot底部模块 -->
    <ul class="foot">
        <li class="active">
            <img src="./images/index_selected.png" alt="">
            <p>首页</p>
        </li>
        <li>
            <img src="./images/category.png" alt="">
            <p>分类</p>
        </li>
        <li>
            <img src="./images/cart.png" alt="">
            <p>购物车</p>
        </li>
        <li>
            <img src="./images/user.png" alt="">
            <p>我的</p>
        </li>
    </ul>
</body>
<script src="./js/http.js"></script>
<script src="./libs/swiper/swiper-bundle.min.js"></script>
<script src="./js/index.js"></script>

</html>